/*
* @Author: Choisaaaa
* @Date: 2018/5/5  1:33
* 订单列表 组件
*/

import React from "react";
import {Link} from "react-router-dom";

import Footer from "component/footer/footer.jsx";
import PageTitle from 'component/page-title/page-title.jsx';
import Pagination from 'util/pagination/pagination.jsx';
import TableList from 'util/table-list/table-list.jsx';
import OrderListSearch from "./order-list-search.jsx"
import MUtil from 'util/mm.jsx'
import Order from 'service/order-service.jsx'

const _mm = new MUtil();
const _order = new Order();

class OrderList extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            pageNum : 1 ,
            orderList : [],
            listType :  "list"
        }
    }
    componentWillMount(){//组件将要加载
        this.mounted = true;
    }
    componentWillUnmount(){//组件销毁
        this.mounted = false;
    }
    componentDidMount(){
        this.loadOrderList();
    }
    loadOrderList(){ //加载订单列表信息
        let listParam = {};
        listParam.listType = this.state.listType;
        listParam.pageNum = this.state.pageNum;
        if(listParam.listType === "search"){
            listParam.orderNo = this.state.orderNumber;
        }
        _order.getOrderList(listParam).then((res) =>{
            res.orderList = res.list;
            if(this.mounted){
                this.setState(res);
            }
        },(errMsg) =>{
            this.setState({
                orderList: []
            });
            _mm.errorTips(errMsg);
        });
    }
    OnSearch(orderNumber) {//存储子组件OrderListSearch发送过来的orderNumber
        let listType = orderNumber === "" ? "list" : "search";
        this.setState({
            listType : listType,
            pageNum :1 ,
            orderNumber : orderNumber
        },()=>{
            this.loadOrderList();
        });
    }
    onPageNumChange(pageNum){//更新页数
        this.setState({
            pageNum : pageNum
        },() => {
            this.loadOrderList();//重新渲染
        });
    }
    render(){
        let tableHeader = [
            {name : "订单号" ,width : "20%"},
            {name : "收件人" ,width : "12%"},
            {name : "订单状态" ,width : "15%"},
            {name : "订单总价" ,width : "13%"},
            {name : "创建时间" ,width : "25%"},
            {name : "操作" ,width : "15%"},
        ];
        let ListBody = this.state.orderList.map((order,index) => {
            return(
                <tr key={index}>
                    <td>
                        <Link to={`/order/detail/${order.orderNo}`}>{order.orderNo}</Link>
                    </td>
                    <td>{order.receiverName}</td>
                    <td>{order.statusDesc}</td>
                    <td>{order.payment}</td>
                    <td>{order.createTime}</td>
                    <td>
                        <Link to={`/order/detail/${order.orderNo}`}>查看详情 </Link>
                    </td>
                </tr>
            )
        });
        return(
            <div id="page-wrapper">
                <PageTitle title="订单管理"/>
                <OrderListSearch onSearch={(orderNumber)=>{this.OnSearch(orderNumber)}}/>
                <TableList tableHeads={tableHeader}>
                    {ListBody}
                </TableList>
                <Pagination current={this.state.pageNum}
                            total={this.state.total}
                            onChange={(pageNum) => this.onPageNumChange(pageNum)}/>
                <Footer/>
            </div>
        );
    }

}
export default OrderList;